<template>
<div class="home">
  <Carousel class="swp" arrow='never' :autoplay='true' :autoplay-speed='3000'>
    <CarouselItem class='img_item'>
      <img src="@a/img/home/1.png" alt="">
      <div class='i_title1'>产业链图谱大数据平台</div>
      <div class='i_title2'> 
        <div>150条产业链</div>
        <div> 4500个产业分类节点  </div>
      </div>
    </CarouselItem>
    <CarouselItem class='img_item'>
      <img src="@a/img/home/2.png" alt="">
       <div class='i_title3'>以产业链数字图谱为核心</div>
      <div class='i_title4'> 聚焦三大服务：精准招商/ 精准决策 / 精准企服</div>
    </CarouselItem>
    <CarouselItem class='img_item'>
      <img src="@a/img/home/3.png" alt="">
       <div class='i_title5'>国内招商领域具备产业链和企业<br>分析核心四大算法的企业</div>
    </CarouselItem>
  </Carousel>
  <div class="serve_div">
    <div class="content">
      <h1>核心产品和服务</h1>
      <div class="tips">
        上海产业合作促进中心园域研究院致力于通过大数据和智能算法智能绘制产业链图谱并智能化分析产业链发展和招商方向，同时应用独有的四大算法，为地方政府发掘全国目标企业集群、绘制产业链全国招商地图，推送精准目标招商项目。
      </div>
      <div class="content_f" @click="toPage('experience')">
        <div class="c_item c_item_m">
          <div class="hover_bg"></div>
          <div class="default">
            <span>产业链招商</span>
            <span>为地方政府和园区提供基于产业链精准分析的全国招商地图和目标招商企业集群</span>
            <div class="small_bg"></div>
            <span class="button">了解情况>></span>
          </div>
        </div>
        <div class="c_item c_item_m">
          <div class="hover_bg"></div>
          <div class="default">
            <span>产业大脑</span>
            <span>以产业链为核心，运用大数据和人工智能，建设数智化产业链作战指挥系统，赋能地方产业精准定位、精准招商、精准营商</span>
            <div class="small_bg"></div>
            <span class="button">了解情况>></span>
          </div>
        </div>
        <div class="c_item c_item_m">
          <div class="hover_bg"></div>
          <div class="default">
            <span>产业服务</span>
            <span>为园区提供不限于线上线下委托招商，包括招商会议、招商推广、园区投资运营、园区企业对接服务等一系列产业服务</span>
            <div class="small_bg"></div>
            <span class="button">了解情况>></span>
          </div>
        </div>
      </div>
    </div>
    <div class="serve"></div>
  </div>
  <div class="news">
    <h1>产业链资讯</h1>
    <div class='l_item' v-for="item in list" :key='item.id' @click="toDetail(item.id)">
      <img :src="item.thumbnail" alt="">
      <div class='news_c'>
        <div class='title'>{{item.post_title}}</div>
        <div class='time'>
          <div><Icon class='icon_t' type="md-time" />{{item.create_time}}</div>
          <div><Icon class='icon_t' type="md-eye" />{{item.post_hits}}</div>
        </div>
      </div>
    </div>
    <div class='more' @click="toNews">查看更多</div>
  </div>
  <div class="hzkh">
    <h1>合作客户</h1>
    <h4>持续为客户创造独特价值</h4>
    <div class='content'>
      <Tabs value="name1" @on-click='changeList'>
        <TabPane label="全部" name="name1">
          <div class="content_div">
            <div class='content_item' v-for="(item) in imgList.slice((0+index*8),(8*(index+1)))" :key="item">
              <img :src="item" alt="">
            </div>
          </div>
        </TabPane>
        <TabPane label="省市" name="name2">
          <div class="content_div">
            <div class='content_item' v-for="(item) in imgList.slice((0+index*8),(8*(index+1)))" :key="item">
              <img :src="item" alt="">
            </div>
          </div>
        </TabPane>
        <TabPane label="园区" name="name3">
          <div class="content_div">
            <div class='content_item' v-for="(item) in imgList.slice((0+index*8),(8*(index+1)))" :key="item">
              <img :src="item" alt="">
            </div>
          </div>
        </TabPane>
      </Tabs>
      <div class="change_box">
        <span class="left_btn" v-show="index>0" @click="index=index-1" ></span>
        <span class="right_btn" @click="index=index+1" v-show="imgList.slice((0+(index+1)*8),(8*(index+2))).length>0"></span>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import img1 from '../assets/img/al_1.png'
import img2 from '../assets/img/al_2.png'
import img3 from '../assets/img/al_3.png'
import img4 from '../assets/img/al_4.png'
import img5 from '../assets/img/al_5.png'
import img6 from '../assets/img/al_6.png'
import img7 from '../assets/img/al_7.png'
import img8 from '../assets/img/al_8.png'
import img9 from '../assets/img/al_9.png'
import img10 from '../assets/img/al_10.png'
import img11 from '../assets/img/al_11.png'
import img12 from '../assets/img/al_12.png'
import { newsList } from "@/api/api.js"

export default {
  name: 'Home',
  data(){
    return{
      imgList:[img1,img2,img3,img4,img5, img6,img7, img8,img9,img10, img11, img12],
      imgList1:[img1,img2,img3,img4,img5, img6,img7, img8,img9,img10, img11, img12],
      imgList2:[img1,img2,img3,img4,img5],
      imgList3:[img6,img7, img8,img9,img10, img11, img12],
      index:0,
      list:[]
    }    
  },
  created(){
    this.getNewsL()
  },
  methods:{
    getNewsL(){
       newsList({limit:3}).then(res=>{
        this.list=res.data.data
      })
    },
    toDetail(id){
      this.$router.push({name:'detail',query:{id}})
    },
    toNews(){
      this.$router.push({name:'news'})
    },
    changeList(name){
      console.log(name)
      this.index=0
      if(name=='name1'){
        this.imgList=this.imgList1
      }else if(name=='name2'){
        this.imgList=this.imgList2
      }else if(name=='name3'){
        this.imgList=this.imgList3
      } 
    },
    toPage(name){
      this.$router.push( name )
      this.isMenu=false
    } 
  }
}
</script>
<style lang='scss' scoped>
.home{
  
  margin: 0 auto;
  .swp{
    width: 100%;
    &::v-deep .ivu-carousel-dots li button{
      background: #fff!important;
      width: 10px!important;
      margin:0 2px;
    }
    &::v-deep .ivu-carousel-dots .ivu-carousel-active button{
      width: 15px!important;
    }
    &::v-deep .ivu-carousel-dots {
      bottom: 10px !important;
    }
    img{
      width: 100%;
      // height: 240px;
    }
  }
  .serve_div{
    background-color: #fff;
    // padding: 15px 0;
    position: relative;
    .content{
      position: relative;
      z-index:1;
    }
    h1{
      color: #333;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      position: relative;
      // margin-top: ;
    }
    .tips{
      margin: 0 auto;
      text-align: left;
      color: #203040;
      font-size: 14px;
      padding: 10px 20px;
      position: relative;
    }
    .content_f{
      display: flex;
      justify-content:space-between;
      flex-wrap: wrap;
      // padding:100px 300px 0 300px;
      .c_item{
        margin-right: 2rem;
        padding: 20px 15px;
        width: 100%;
        height: 190px;
        margin:10px 12px;
        background: #fff;
        box-shadow: 0 8px 12px 0 rgba(0,104,219,0.5);
        position: relative;
        border-radius: .75rem;
        overflow: hidden;
        cursor: pointer;
        color: #2d8cf0;
        text-decoration: none;
        outline: none;
        transition: color .2s ease;
        .default{
          background: transparent;
          text-decoration: none;
          outline: none;
          cursor: pointer;
          text-align: left;
          span:first-child {
            font-size: 20px;
            font-weight: 700;
          }
          span{
            display: block;
            font-size: 15px;
            margin-bottom: 15px;
            position: relative;
            z-index: 1000;
            transition: color .5s ease;
            color: #203040;
          }
          .small_bg{
            display: block;
            background: url(~@a/img/small.png) 0 0 no-repeat;
            background-size: 100% 100%;
            width: 5rem;
            height: 6rem;
            position: absolute;
            right: .3125rem;
            top: .3125rem;
          }
          .button{
            position: absolute;
            bottom: 0;
            left: 15px;
            border: .0625rem solid #ffa400;
            background-color: #ffa400;
            color: #fff;
            border-radius: 1rem;
            width: 7.3125rem;
            height: 2rem;
            line-height: 1.875rem;
            text-align: center;
            font-size: 1rem;
          }
        }
        .hover_bg{
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(134deg,#0649b8 1%,#0a7fd7 41%,#03d2c5 99%);
          box-shadow: 0 1.2rem 1.5rem 0 rgb(0 135 168 / 50%);
          border-radius: .75rem;
        }
      }
      .c_item_m{
        .hover_bg{
          transition:all 1.2s;
          opacity: 1;
        }
        .default span{
          color: #fff;
        }
        .small_bg{
          background: url(~@a/img/smallHover.png) 0 0 no-repeat !important;
          background-size: 100% 100%;
        }
        .button{
          border:1px solid #fff;
          opacity: 1;
          transition:all .2s;
          background:rgba($color: #000000, $alpha: 0);
        }
      }
    }
  }
  .serve{
    width: 100%;
    height: 200px;
    background: url(~@a/img/serve_bg.png) 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -25px;
    left: 0;
  }
  .hzkh{
    background-color: #fff;
    padding: 0px 15px 70px 15px;
    background: url(~@a/img/hzkh.png) 0 0 no-repeat;
    background-size: 100% 100%;
    // height: 50rem;
    // margin-top: 40px;
    h1{
      color: #222;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
    }
    h4{
      font-size: 14px;
      padding-top: .5rem;
      margin-bottom: 1rem;
      font-weight: 400;
    }
    .content{
      height: 360px;
      background: hsla(0,0%,100%,.7);
      padding: 14px 10px 60px 10px;
      position: relative;
      &::v-deep .ivu-tabs-bar {
        border: none!important;
        margin-bottom: 1rem!important;
        margin-left: 56px!important;
      }
      &::v-deep .ivu-tabs-nav .ivu-tabs-tab {
        font-size: 14px!important;
        margin-right: 40px!important;
        color: rgb(102, 102, 102)!important;
        padding: .5rem;
      }
      &::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
        color: rgb(42, 164, 245)!important;
        font-weight: 700;
        border-bottom: 3px solid #2091d3!important;
      }
      &::v-deep .ivu-tabs-ink-bar{
        visibility: hidden !important;
      }
      &::v-deep .ivu-tabs-nav-prev{
        visibility: hidden !important;
      }
      &::v-deep .ivu-tabs-nav-next{
        visibility: hidden !important;
      }
      .content_div{
        white-space: normal!important;
        border: 1px solid #f5f5f7;
        border-left: none;
        border-top: none;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        .content_item{
          width: calc(50% - 1px);
          height: 60px;
          border: 1px solid #f5f5f7;
          border-bottom: none;
          border-right: none;
          display: flex;
          align-items: center;
          justify-content:center;
          img{
            width:75%;
            margin-left:12.5%;
          }
        }
      }
      .change_box {
        position: absolute;
        right: 12px;
        bottom: 12px;
        span{
          display: inline-block;
          vertical-align: middle;
          width: 2.5rem;
          height: 2.5rem;
          background: #fff;
          margin-left:6px;
          cursor: pointer;
          background: url() 0 0 no-repeat;
          background-size: 100% 100%;
        }
        .left_btn{
          transform: rotate(180deg);
        }
      }
    }
  }
}
.img_item{
  position: relative;
  text-shadow: 0.1em 0.1em 0.2em black;
}
.i_title1{
  position:absolute;
  color:#fff;
  top:40px;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align:center;
}
.i_title2{
  position:absolute;
  color:#fff;
  top:80px;
  width: 100%;
  text-align: center;
  div{
    font-size: 18px;
    margin: 0 10px;
  }
}
.i_title3{
  position:absolute;
  color:#fff;
  top:50px;
  font-size: 16px;
  text-align:left;
  margin-left:20px;
}
.i_title4{
  position:absolute;
  color:#fff;
  top:90px;
  margin-left:20px;
  font-weight: 700;
  font-size: 16px;
  text-align:left;
}
.i_title5{
  position:absolute;
  color:#fff;
  top:60px;
  width: 100%;
  text-align:center;
  font-weight: 700;
  font-size: 18px;
}
.news{
  padding:20px 0 40px;
  margin:20px 0 0;
  background: #F5FAFF;
  .more{
    margin:20px auto;
    border: 1px solid rgb(87, 193, 255);
    color: rgb(87, 193, 255);
    padding:2px 4px;
    width:100px;

  }
  h1{
    color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    position: relative;
  }
    .l_item{
      padding:10px;
      display:flex;
      margin:10px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      .news_c{
        width: 100%;
        position: relative;
      }
      img{
        min-width: 120px;
        max-width: 120px;
        min-height: 80px;
        max-height: 80px;
        margin-right:10px;
      }
      .title{
        font-size: 15px;
        font-weight:700;
        margin-bottom: 1rem;
        text-align: left;
        color: #333;
      }
      .time{
        margin-top:20px;
        text-align:right;
        position:absolute;
        right: 0;
        bottom:0px;
        color: #888;
        .icon_t{
          font-size: 14px;
          margin-right: 5px;
        }
        div{
          display: inline-block;
          margin-left: 20px;
          font-size: 12px;
        }
      }
    }
}
</style>
